<template>

    <h1>登陆</h1>
    <form @submit.prevent="handleLogin">

        <label for="email">邮箱：</label>
        <input v-model="email" type="email" id="email" placeholder="email" />

        <label for="password">密码：</label>
        <input v-model="password" type="password" id="password" placeholder="password" />

        <button type="submit">登陆</button>

    </form>

    <div v-if="showTip">
        {{ tipMessage }}
    </div>
    <router-link to="/register">注册</router-link>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { useStore } from 'vuex';
import { loginAPI } from '@/service/API';
import router from '@/router';

const store = useStore();
const email = ref('')
const password = ref('')
const tipMessage = ref<string>('')
const showTip = ref(false)


const handleLogin = async () => {
    const { R_loginAPI, message } = await loginAPI(email.value, password.value, store);
    if (R_loginAPI) {
        router.push('/');
        return
    }
    tipMessage.value = message
    showTip.value = true
}

</script>

<style scoped></style>